<template>
  <view class="cu-bar search bg-white">
    <view class="action">
      <text class="cuIcon-location"></text>
      <text>{{area}}</text>
      <text class="cuIcon-triangledownfill"></text>
    </view>
    
    <!-- <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view> -->
    <view class="search-form round">
      <text class="cuIcon-search"></text>
      <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
    </view>
    
    <view class="action">
      <text class="cuIcon-noticefill"></text>
    </view>
  </view>
</template>

<script>
  let QQMapWX = require('static/js/qqmap-wx-jssdk.js');
  let qqmapsdk=new QQMapWX({
    key: '3P2BZ-UZJL5-CK4IG-QSZRC-N7JHH-4QBV6'
  })
	export default {
		data() {
			return {
				area: '上海',
				location: {latitude: 10, longitude: 10},
			};
		},
    
    created() {
      this.getLocation();
    },
    
    methods: {
      getLocation() {
        uni.getLocation({
          success: (res) => {
            this.location = {latitude: res.latitude, longitude: res.longitude}
            this.reverseGeo();
          },
          fail: (err) => {
            console.log(err);
          },
          complete: () => {
      
          },
        })
      },
      
      reverseGeo() {
        qqmapsdk.reverseGeocoder({
          location: this.location,
          success:(res)=>{
            // 获取地理位置
            // console.log(res.result.ad_info.district)
            this.area = res.result.ad_info.district
          },
          fail:(err)=>{
            console.log(err)
          },
          complete:(res)=>{
            console.log(res);
          }
        })
      }
    }
	}
</script>

<style>

</style>
